<template>
    <div>
        <!-- 并班记录 -->
        <div class="container">
            <!-- 表单 -->
            <el-form :inline="true" :model="formList" class="ticketForm" id="classRecord">
                <el-form-item label="操作时间起">
                    <el-date-picker type="datetime" size="mini" default-time="00:00:00"
                                    v-model="formList.startDate" value-format="yyyy-MM-dd-HH:mm:ss">
                    </el-date-picker>
                    至

                    <el-date-picker type="datetime" size="mini" default-time="23:59:59"
                                    v-model="formList.endDate" value-format="yyyy-MM-dd-HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <button class="check-btn rf" type="button" @click="check">
                    <img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询

                </button>
            </el-form>
            <!-- 表格1 -->
            <div>
                <el-table style="width: 100%" :data="tableData" height="400px" @row-click="seatdeailinfo">
                    <el-table-column type="index" min-width="20px"></el-table-column>
                    <el-table-column prop="beizhu" label="备注"></el-table-column>
                    <el-table-column prop="busdate" label="班次日期"></el-table-column>
                    <el-table-column prop="oldbustime" label="原班次时间" min-width="50px"></el-table-column>
                    <el-table-column prop="oldbusid" label="班次号" min-width="50px"></el-table-column>
                    <el-table-column prop="newbustime" label="目的班次时间" min-width="50px"></el-table-column>
                    <el-table-column prop="newbusid" label="班次号" min-width="50px"></el-table-column>
                    <el-table-column prop="lastoperuser" label="最后操作人"></el-table-column>
                    <el-table-column prop="lastopertime" label="最后操作时间"></el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="pagination">
                <el-pagination
                        :page-sizes="[50, 200, 500]"
                        :page-size="50"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total='this.totalrows'>
                </el-pagination>
            </div>
            <!-- 明细 -->
            <div class="detailContent">
                <div class="title">明细</div>
                <div class="content"></div>
            </div>
            <!-- 表格2 -->
            <div>
                <el-table style="width: 100%" height="300px" :data="seatlistinfo">
                    <el-table-column prop="billno" label="票号" width="120"></el-table-column>
                    <el-table-column prop="oldseatno" label="原座位" width="160"></el-table-column>
                    <el-table-column prop="newseatno" label="新座位" width="160"></el-table-column>
                    <el-table-column prop="" label="" width="830"></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
    import "../../assets/js/jquery.js";
    import FormData from "../../components/common/form";
    import TableData from "../../components/common/tableData";
    import qs from "qs";

    export default {
        data() {
            return {
                formList: {
                    startDate: "",
                    endDate: "",
                },
                tableData: [],
                totalrows: "",
                nowtoday: "",
                seatlistinfo: [],

            };
        },
        methods: {
            //获取列表
            getroadselllist(){
                var nowtoday = this.nowtoday;
                var todaytimestar = nowtoday + " 00:00:00";
                var todaytimeend = nowtoday + " 23:59:59";
                console.log(nowtoday);
                console.log(todaytimestar);
                this.$http
                    .post(
                        "/query/busplan/bingban/log/list",
                        qs.stringify({
                            filterRules: '[{"field":"bb.create_time","op":"dge","value":"' + todaytimestar + '"},' +
                            '{"field":"bb.create_time","op":"dle","value":"' + todaytimeend + '"}]',
                            page: 1,
                            rows: 50,
                        })
                    )
                    .then(data => {
                        console.log(data.data);
                        for (var item of data.data.list) {
                            this.tableData.push({
                                id:item.id,
                                beizhu: item.remark,
                                busdate: item.from_bus_date,
                                oldbustime: item.from_bus_time,
                                oldbusid: item.from_bus_id,
                                newbustime: item.to_bus_time,
                                newbusid: item.to_bus_id,
                                lastoperuser: item.last_oper_no,
                                lastopertime: item.update_time,
                            })
                        }
                        this.totalrows = this.tableData.length;
                    });
            },
            //查询
            check(){
                this.tableData = [];
                this.totalrows = "";
                console.log(this.formList.startDate);
                console.log(this.formList.endDate);

                this.$http
                    .post(
                        "/query/busplan/bingban/log/list",
                        qs.stringify({
                            filterRules: '[{"field":"bb.create_time","op":"dge","value":"' + this.formList.startDate + '"},' +
                            '{"field":"bb.create_time","op":"dle","value":"' + this.formList.endDate + '"}]',
                            page: 1,
                            rows: 50,
                        })
                    )
                    .then(data => {
                        console.log(data.data);
                        for (var item of data.data.list) {
                            this.tableData.push({
                                id:item.id,
                                beizhu: item.remark,
                                busdate: item.from_bus_date,
                                oldbustime: item.from_bus_time,
                                oldbusid: item.from_bus_id,
                                newbustime: item.to_bus_time,
                                newbusid: item.to_bus_id,
                                lastoperuser: item.last_oper_no,
                                lastopertime: item.update_time,
                            })
                        }
                        this.totalrows = this.tableData.length;
                        console.log(this.tableData)
                    });
            },
            //获取座位详细列表
            seatdeaillist(rowid){
                this.seatlistinfo = [],
                this.$http
                    .post("/query/busplan/bingban/log/details",
                        qs.stringify({
                            log_id: rowid
                        })
                    )
                    .then(data => {
                        console.log(data.data)
                        for(var item of data.data){
                            this.seatlistinfo.push({
                                billno: item.billno,
                                oldseatno: item.from_seatname,
                                newseatno: item.to_seatname,
                            })
                        }
                    })
            },
            //点击表格，获取座位明细列表
            seatdeailinfo(row,event){
                console.log(row.id);
                this.seatdeaillist(row.id);
            },
            //时间处理,获取当天时间
            todayfunction(){
                let now = new Date();
                var nowday = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())).toISOString().slice(0, 10);
                this.nowtoday = nowday;
                console.log(nowday);
            },
        },
        mounted(){
            this.todayfunction();
            this.getroadselllist();
        },
    }
</script>
<style scoped>
    @import url('../../assets/css/check/classRecord.css');

    .el-date-editor.el-input {
        width: 150px !important;
    }

    .check_btn, .check_btn:hover {
        background: #009688;
        border-radius: 5px;
        border: 0px;
        color: white;
        cursor: pointer;
        padding: 10px 20px;
    }

    .form_btn {
        float: right;
        margin-right: 70px;
    }
</style>
